<template>
  <div class="container">
    <el-card>
      <h3 slot="header">订单管理</h3>
      <el-tabs v-model="activeName" @tab-click="onTabClick">
        <el-tab-pane label="全部订单" name="-1" />
        <el-tab-pane label="待付款" name="0" />
        <el-tab-pane label="待发货" name="1" />
        <el-tab-pane label="待收货" name="2" />
        <el-tab-pane label="已完成" name="3" />
        <el-tab-pane label="已关闭" name="4" />
      </el-tabs>
      <el-table :data="list" stripe fit>
        <el-table-column prop="id" label="订单号" align="center" />
        <!-- <el-table-column prop="type_info" label="订单明细" align="center" /> -->
        <el-table-column prop="originalPrice" label="订单金额" align="center" />
        <el-table-column prop="createDate" label="下单时间" align="center" />
        <el-table-column prop="statusStr" label="订单状态" align="center" /> -->
        <el-table-column prop="type" label="操作" align="center">
          <template  slot-scope="order_bt">
            <div>
              <el-button type="text" @click="payorderinfo(order_bt.$index , order_bt.row)">立即支付</el-button>
              <el-button type="text" @click="payorderstatus(order_bt.$index , order_bt.row)">查看详情</el-button>
              <el-button type="text" @click="payordercancel(order_bt.$index , order_bt.row)">取消订单</el-button>
              <el-button type="text" @click="surerecive(order_bt.$index , order_bt.row)">确认收货</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="cc-page">
        <el-pagination @current-change="onPageChange" :total="total" :current="page" />
      </div>
    </el-card>
  </div>
</template>
<script>
  import { doOrderList, doUpdateStatus, doCancelOrder, doOrderProduceList } from '@/apis/order';
  import { formatDate } from '@/utils/dateUtils';
  // import { doInfo } from '@/apis/product';
  export default {
    name: 'AccountOrder',
    data() {
      return {
        activeName: '-1',
        list: [],
        limit: 10,
        page: 1,
        total: 0
      };
    },
    methods: {
      async surerecive(index, row) {
        await doUpdateStatus({ orderId: row.id, status: 3 });
      },
      async payorderstatus(index, row) {
        this.$router.push({
          path: '/orderstatus',
          query: { order: row }
        });
      },
      async payordercancel(index, row) {
        // console.log('-------------------');
        // console.log(row.id);
        // console.log(row);
        const res = await doCancelOrder({ orderId: row.id });
        console.log(res);
      },
      payorderinfo(index, row) {
        // this.$router.push({ path: '/orderinfo' });
        this.$router.push({
          path: '/orderinfo',
          query: { price: row.totalAmount, orderId: row.orderSn, row: row, orderids: row.id }
        });
      },
      onTabClick(no) {
        this.activeName = no.name.toString();
        this.page = 0;
        this.fetchList();
      },
      onPageChange(no) {
        this.page = no;
        this.fetchList();
      },

      async fetchList() {
        let status = { memberId: this.cache.fetchUser().id };
        if (this.activeName !== '-1') {
          status = {
            memberId: this.cache.fetchUser().id,
            status: this.activeName
          };
        }
        const data = {
          pageSize: this.limit,
          pageNum: this.page,
          reqJson: JSON.stringify(status)
        };
        let res = await doOrderList(data);
        this.list = res.data.list;
        // console.log('-------------------------list');
        // console.log(this.list)
        // console.log(this.list.length);
        this.total = res.data.total;
        for (const value of this.list) {
          debugger;
          value['createDate'] = formatDate(new Date(value.createTime), 'yyyy-MM-dd hh:mm');
          value['originalPrice'] = value.totalAmount + ' /元';
          switch (value.status) {
          case 0:
            value['statusStr'] = '待付款';
            break;
          case 1:
            value['statusStr'] = '待发货';
            break;
          case 2:
            value['statusStr'] = '已发货';
            break;
          case 3:
            value['statusStr'] = '已完成';
            break;
          case 4:
            value['statusStr'] = '已关闭';
            break;
          case 5:
            value['statusStr'] = '无效订单';
            break;
          default:
            value['statusStr'] = '无效订单';
          }
        }
        // console.log(this.list);
        // let counte = 0;
        for (const value of this.list) {
          // counte = counte + 1;
          res = await doOrderProduceList({ reqJson: JSON.stringify({ orderId: value.id }) });
          // console.log('-------------------------info');
          console.log(res.data);
          if ((res == null) || (res.data.length === 0)) {
            continue;
          }
          value['product_list'] = res.data;
          // this.$set(this.list[value], 'type_info', res.data.stock.toString());
          /*
          res = await doInfo({ productId: res.data[0].id });
          // console.log(res);
          // this.list[value]['type_info'] = res.data.stock.toString();
          this.$set(this.list[value], 'type_info', res.data.stock.toString());
          */
          // console.log('--------------------ss');
          // console.log(this.list[value]['type_info']);
          // console.log('ss---------------------------ss');
          // console.log(JSON.stringify(res));
        }
        this.list = this.list;
      }
    },
    async create() {
      // await this.fetchList();
    },
    async mounted() {
      await this.fetchList();
    }
  };
</script>
<style lang="scss" type="text/scss" scoped>
.el-card {
  width: 100%;
}

.el-tabs {
  background-color: #f5f5f5;
  padding: 6px 12px;
}

.el-table {
  margin-top: 30px;
  width: 99%;
}
</style>
